<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        :root{
            --x:0px;
            --y:0px;
        }
        img{
            position: absolute;
            left: calc(200px - var(--x));
            top: calc(200px - var(--y));
            width: 600px;
            height: auto;
        }
        
    </style>
</head>
<body>
    <img id="img" src="https://wwwstatic.vivo.com.cn/vivoportal/files/resource//product/1700187695759/images/iqoo12-distance-img1-lg.jpg.webp" alt="" srcset="">

    <script>
        const img = document.getElementById('img')
        const update = ()=>{
            console.log('---')
            img.style.setProperty('--x',`${window.screenX}px`)
            img.style.setProperty('--y',`${window.screenY}px`)
            window.requestAnimationFrame(update)
        }
        window.requestAnimationFrame(update)
    </script>
</body>
</html>